<template>
  <div class="shonames">
    <div class="shop_list">
      <div class="shopname">
        <p>沃尔玛</p>
      </div>
      <div class="goods">
        <ul>
          <li>
            <div class="shop_img"></div>
            <div class="shop_money">
              <div class="shoppingname">番茄250g/份</div>
              <div class="money">
                <p>￥33.6*3</p>
                <p>￥99.9</p>
              </div>
            </div>
          </li>
          <li>
            <div class="shop_img"></div>
            <div class="shop_money">
              <div class="shoppingname">番茄250g/份</div>
              <div class="money">
                <p>￥33.6*3</p>
                <p>￥99.9</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="more">
        <div class="dom iconfont icon-xiajiantou"></div>
        <p>共计3件/1.4kg</p>
      </div>
    </div>
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.shonames {
  width: 100%;
}
.shop_list {
  display: flex;
  justify-content: space-between;
  //   align-content: space-around;
  align-items: center;
  flex-direction: column;
  margin-top: 0.16rem;
  width: 3.39rem;
  //   width: 100%;
  height: 2.22rem;

  .shopname {
    align-self: flex-start;
    margin-left: 0.16rem;
    margin-top: 0.16rem;
    line-height: 0.22rem;
    width: 0.48rem;
    height: 0.22rem;
    font-size: 16px;
    color: #333333;
  }

  .goods {
    width: 100%;

    ul {
      li {
        margin: 0.08rem 0 0.08rem;
        display: flex;
        justify-content: space-around;
        height: 0.46rem;

        .shop_img {
          margin: 0 0.16rem 0 0.08rem;
          height: 0.46rem;
          width: 0.46rem;
          background-color: pink;
        }

        .shop_money {
          margin: 0 0.16rem 0 0.08rem;
          height: 0.46rem;
          width: 2.61rem;

          .shoppingname {
            height: 0.2rem;
            font-size: 0.14rem;
            color: #333333;
          }

          .money {
            display: flex;
            height: 0.2rem;
            font-size: 0.1rem;
            justify-content: space-between;
            line-height: 0.2rem;

            p:first-child {
              color: red;
            }
          }
        }
      }
    }
  }
}

.more {
  position: relative;
  display: flex;
  justify-content: center;
  width: 3.07rem;
  height: 0.28rem;
  background-color: #f5f5f5;

  P {
    line-height: 0.28rem;
    text-align: center;
    font-size: 14px;
    color: #999999;
  }

  .dom {
    position: absolute;
    top: 0.02rem;
    left: 2.1rem;
    width: 0.18rem;
    height: 0.1rem;
    color: #999999;
    font-size: 0.25rem;
  }
}
</style>